<template>
  <div class="yan-dan">
    <div class="flex-between margin-bottom-10">
      <div class="t-18">新增烟弹</div>
      <div>
        <el-button type="primary"
                   size="small"
                   @click="saveAll">提交</el-button>
        <el-button type="danger"
                   size="small"
                   @click="handleReset">重置</el-button>
        <el-button @click="cancelAll"
                   size="small">返回</el-button>
      </div>
    </div>
    <div class="shopEditHead">
      <el-form :model="form"
               :rules="rules"
               ref="form"
               label-width="100px"
               class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品名称"
                          :rules="{required:true,message: '不能为空'}"
                          prop="goodsName">
              <el-input class="input"
                        v-model="form.goodsName"
                        placeholder="请输入商品名称">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="口味名称"
                          :rules="{required:true,message: '不能为空'}"
                          prop="tasteNameId">
              <el-select :multiple="false"
                         v-model="form.tasteNameId"
                         placeholder="请选择">
                <el-option v-for="item in tasteList"
                           :key="item.id"
                           :label="item.val"
                           :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="尼古丁含量"
                          prop="nicotine">
              <el-input-number v-model="form.nicotine"
                               :min="1"
                               :max="100"
                               placeholder="请输入尼古丁含量 1-100">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="口味甜度"
                          prop="sweetNum">
              <el-input-number v-model="form.sweetNum"
                               :min="1"
                               :max="5"
                               placeholder="请输入口味凉度 1-5"
                               style="margin-top: 5px">
              </el-input-number>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="口味凉度"
                          prop="coolNum">
              <el-input-number class="input"
                               v-model="form.coolNum"
                               :min="1"
                               :max="5"
                               placeholder="请输入口味凉度 1-5"
                               style="margin-top: 5px">
              </el-input-number>

            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="口味浓郁都"
                          prop="richNum">
              <el-input-number class="input"
                               v-model="form.richNum"
                               :min="1"
                               :max="5"
                               :precision="0"
                               placeholder="请输入口味浓郁都 1-5"
                               style="margin-top: 5px">
              </el-input-number>

            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="销售价【单位:分】"
                          label-width="140px"
                          :rules="{required:true,message: '不能为空'}"
                          prop="salePrice">
              <el-input-number class="input"
                               v-model="form.salePrice"
                               :min="0"
                               :precision="0"
                               :controls="false"
                               placeholder="请输入销售价"
                               style="margin-top: 5px">
              </el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="setLabel">
      <span class="labelItem">
        <span class="textarea">
          <p>商品描述</p>
          <el-input v-model="form.goodsText"
                    type="textarea"
                    :rows="6"
                    :maxlength="1000"
                    show-word-limit
                    placeholder="请输入商品描述" />
        </span>
      </span>
    </div>
    <!-- 文件上传 -->
    <el-row class="margin-top-20 margin-bottom-20">
      <el-col :span="8"
              class="padding-right-10">
        <div class="listImgIds">
          <el-upload class="upload-demo"
                     :headers="{'Authorization': $store.state.app.token}"
                     action="/file/uploadFile"
                     :limit="10"
                     :on-remove="handleFileRemove"
                     :on-success="handleSuccessUploadFile1"
                     :file-list="uploadFile1"
                     accept=".jpg,.png,.bmp,.jpeg"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传商品列表图片</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传10张jpg/png文件</div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="8"
              class="padding-right-10">
        <div class="thumbnailLunbo">
          <el-upload class="upload-demo"
                     :headers="{'Authorization': $store.state.app.token}"
                     action="/file/uploadFile"
                     :limit="10"
                     :on-remove="handleFileRemove"
                     :on-success="handleSuccessUploadFile2"
                     :file-list="uploadFile2"
                     accept=".jpg,.png,.bmp,.jpeg"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传商品详情图片</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传10张jpg/png文件</div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="8"
              class="padding-right-10">
        <div class="thumbnailLunbo">
          <!-- <span class="imguploadtitle">商品轮播图</span> -->
          <el-upload class="upload-demo"
                     :headers="{'Authorization': $store.state.app.token}"
                     action="/file/uploadFile"
                     :limit="10"
                     :on-remove="handleFileRemove"
                     :on-success="handleSuccessUploadFile3"
                     :file-list="uploadFile3"
                     accept=".jpg,.png,.bmp,.jpeg"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传商品口感图片</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传10张jpg/png文件</div>
          </el-upload>
        </div>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="8"
              class="padding-right-10">
        <div class="thumbnaimian">
          <!-- <span class="imguploadtitle">商品主图</span> -->
          <el-upload class="upload-demo"
                     :headers="{'Authorization': $store.state.app.token}"
                     action="/file/uploadFile"
                     :limit="10"
                     :on-remove="handleFileRemove"
                     :on-success="handleSuccessUploadFile4"
                     :file-list="uploadFile4"
                     accept=".jpg,.png,.bmp,.jpeg"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传商品参数图片</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传10张jpg/png文件</div>
          </el-upload>
        </div>
      </el-col>
      <el-col :span="8  "
              class="padding-right-10">
        <div class="thumbnailLunbo">
          <el-upload class="upload-demo"
                     :headers="{'Authorization': $store.state.app.token}"
                     action="/file/uploadFile"
                     :limit="1"
                     :on-remove="handleFileRemove"
                     :on-success="handleSuccessUploadFile5"
                     :file-list="uploadFile5"
                     accept=".jpg,.png,.bmp,.jpeg"
                     list-type="picture">
            <el-button size="small"
                       type="primary">点击上传防伪码图片</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传1张jpg/png文件</div>
          </el-upload>
        </div>
      </el-col>

    </el-row>
  </div>
</template>
<script>
import {
  addGoods,
  updateGoods,
  deleteGoodsById,
} from "../../services/goods";

import { getDicList } from '../../services/service_dictionary'
import { deleteFile } from '../../services/file'

const initForm = () => {
  return {
    productId: "",
    goodsId: "",
    tasteNameId: "",
    //tasteNameValue:"",
    tasteName: "",
    sweetNum: "",
    coolNum: "",
    richNum: "",
    mainImg: "",
    images: [],
    nicotine: "",
    goodsName: "",
    goodsText: "",
    salePrice: "",
    type: "",
    listImgIdsList: [],
    listImgIds: "",

    detailImgIds: "",
    detailImgIdsList: [],

    tasteImgIds: "",
    tasteImgIdsList: [],

    paramImgIds: "",
    paramImgIdsList: [],

    securityCodeImg: "",

    isEnable: "1",
  }
}
export default {
  name: "YanDanGoodsEditComponent",

  data () {
    return {
      form: initForm(),
      rules: {
        nicotine: [
          { required: true, message: '请输入尼古丁含量', trigger: 'blur' },
          { pattern: /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/, message: '含量范围1-100', trigger: 'blur' }
        ]
      },//详情表单规则
      tasteList: [],
      uploadFile1: [],
      uploadFile2: [],
      uploadFile3: [],
      uploadFile4: [],
      uploadFile5: [],
      isSaved: false, // 当前商品是否已保存数据
    };
  },
  computed: {
    control: function () {
      // return this.sr.length / this.specArr[0].spValue.length
      return this.spe.length / this.specArr[0].items.length;
    },
    spigoods: function () {
      return this.specArr.slice(0);
    },
    filterSpe () {
      return this.spe.filter((item) => item.sp1);
    },
  },

  created () {
    this.getTasteList()
  },
  methods: {
    // 获取口味字典goods_taste_name
    async getTasteList () {
      const res = await getDicList({
        label: "goods_taste_name",
        current: 1,
        size: 99999
      })
      if (res.code == 0) {
        this.tasteList = res.data.records
      } else {
        this.$message.warning(res.msg)
      }
    },
    // 商品列表图
    handleSuccessUploadFile1 (res, file, fileList) {
      console.log(fileList);
      const ids = fileList.map(item => {
        return item.response.data.id
      })
      this.form.listImgIds = ids
    },
    // 商品详情图
    handleSuccessUploadFile2 (res, file, fileList) {
      const ids = fileList.map(item => {
        return item.response.data.id
      })
      this.form.detailImgIds = ids
    },
    // 商品口感图
    handleSuccessUploadFile3 (res, file, fileList) {
      const ids = fileList.map(item => {
        return item.response.data.id
      })
      this.form.tasteImgIds = ids
    },
    // 商品参数图
    handleSuccessUploadFile4 (res, file, fileList) {
      const ids = fileList.map(item => {
        return item.response.data.id
      })
      this.form.paramImgIds = ids
    },
    // 商品防伪码
    handleSuccessUploadFile5 (res, file, fileList) {
      this.form.securityCodeImg = res.data.id;
    },
    // 图片删除
    handleFileRemove (res, file, fileList) {
      const { id } = file.response.data
      deleteFile(id)
    },
    // 保存编辑
    async saveAll () {
      // 获取产品类型  和   产品id
      this.form.productId = this.$route.query.productId;
      this.form.type = this.$route.query.productType;

      if (this.form.tasteNameId === "" || !this.form.tasteNameId) {
        this.$message.error("口味名称不能为空");
      } else if (this.form.sweetNum === "" || !this.form.sweetNum) {
        this.$message.error("口味甜度不能为空");
      } else if (this.form.coolNum === "" || !this.form.coolNum) {
        this.$message.error("口味凉度不能为空");
      } else if (this.form.richNum === "" || !this.form.richNum) {
        this.$message.error("口味浓郁都不能为空");
      } else if (this.form.salePrice === "" || !this.form.salePrice) {
        this.$message.error("salePrice不能为空");
      } else {
        let save = {};
        if (this.form.goodsId) {
          save = await updateGoods(this.form);
        } else {
          save = await addGoods(this.form);
        }
        if (save.code === 0) {
          this.isSaved = true;
          this.$router.back(-1);
        } else {
          this.$message.warning(res.msg)
        }
      }
    },
    // 重置表单
    handleReset () {
      this.form = initForm()
    },
    // 返回上一页
    cancelAll () {
      this.$router.back(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.yan-dan {
}
</style>
 
 